CSS Rounded Corners

In CSS, you can create rounded corners for elements using the border-radius property. This property allows you to define the radius of the element's corners, giving them a rounded appearance.

Here's how you can use border-radius:

Example

.rounded-element {
    border-radius: 10px; /* Applies equal border radius to all corners */
}

You can click on above box to edit the code and run again.

Output

rounded-element

This will apply a rounded corner effect to all corners of the element with the class .rounded-element, with a radius of 10 pixels.

You can also specify different radii for each corner individually:

Example

.rounded-element {
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
}

Output

rounded-element

In this example, each corner of the element will have a different radius, creating a more customized rounded appearance.

You can also use the border-radius shorthand property to define all corner radii at once:

Example

.rounded-element {
    border-radius: 10px 20px 30px 40px; /* top-left, top-right, bottom-right, bottom-left */
}

Output

rounded-element

This shorthand notation allows you to specify the radius for each corner in a clockwise direction starting from the top-left corner.

Additionally, you can use percentages to specify relative radii based on the size of the element:

Example

.rounded-element {
    border-radius: 50%; /* Makes the element a circle */
}

You can click on above box to edit the code and run again.

Output

rounded-element

This will make all corners of the element perfectly rounded, creating a circular shape.

Using border-radius, you can achieve various visual effects with rounded corners in your CSS layouts.